import { Button, Typography, theme } from 'antd'

import React from 'react'

import EchartsModule from './EchartsDemo'

import { chartFontSize } from '@/utils/rem.ts'

const { Title } = Typography
const { useToken } = theme

const PageDemo = () => {
  const { token } = useToken()
  const { colorText } = token
  const echartsRef: any = React.createRef()
  const data = [
    { value: 600, name: 'A', percent: '30%', itemStyle: { color: '#1FCAC9' } },
    { value: 580, name: 'B', percent: '30%', itemStyle: { color: '#F2A139' } },
    { value: 484, name: 'C', percent: '30%', itemStyle: { color: '#F0D440' } },
    { value: 300, name: 'D', percent: '30%', itemStyle: { color: '#87A7BF' } }
  ]
  const options = {
    textStyle: {
      color: colorText
    },
    title: {
      text: '666',
      subtext: '评价总数/次',
      left: '53%',
      top: '36%',
      textAlign: 'center',
      itemGap: 6,
      textStyle: {
        fontSize: chartFontSize(28),
        color: '#2C2C2C',
        fontFamily: 'MicrosoftYaHei'
      },
      subtextStyle: {
        fontSize: chartFontSize(16),
        color: '#2C2C2C',
        fontFamily: 'MicrosoftYaHei'
      }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      show: true,
      top: '75%',
      itemGap: 20,
      left: '50%',
      icon: 'circle',
      orient: 'vertical',
      textStyle: {
        rich: {
          name: {
            fontSize: chartFontSize(16),
            width: chartFontSize(20),
            color: '#57748B'
          },
          percent: {
            width: chartFontSize(70),
            fontSize: chartFontSize(16),
            align: 'right',
            color: '#32393F'
          },
          value: {
            fontSize: chartFontSize(16),
            align: 'right',
            color: '#32393F'
          }
        }
      },
      formatter(name: string) {
        return `{name|${name}} {percent|${data.find((item) => item?.name === name)?.percent ?? '-'}} {value|${
          data.find((item) => item?.name === name)?.value ?? '-'
        }次} `
      }
    }
  }

  const seriesData: any = [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '48%'],
      center: ['53%', '45%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 4,
        borderColor: '#fff',
        borderWidth: 4
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: false,
          fontSize: 16,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: data
    }
  ]
  const changeDate = () => {
    echartsRef.current.echartsPlay(true, 0, -1)
  }
  const changeDate1 = () => {
    echartsRef.current.echartsPause()
  }
  const changeDate2 = () => {
    const echartsInstance = echartsRef.current.echartsInstance()
    echartsInstance.clear()
    echartsInstance.dispose()
  }

  return (
    <div>
      <Title level={3}>6、通过 ref 调用开始结束动画，使用 ref 调用的好处是可以指定在第几项开始动画</Title>
      <div>
        <Button onClick={changeDate}>开始动画</Button>
        <Button className="ml-2" onClick={changeDate1}>
          结束动画
        </Button>
        <Button className="ml-2" onClick={changeDate2}>
          获取实例，销毁echarts
        </Button>
      </div>
      <div className="w-100 h-320px">
        <EchartsModule onRef={echartsRef} options={options} seriesData={seriesData}></EchartsModule>
      </div>
    </div>
  )
}

export default PageDemo
